<template>
  <div>
    <div class="search">
      <Row>
        <Col>
          <Card>
            <Row>
              <Form ref="searchForm" :model="searchForm" inline :label-width="100" class="search-form">
                <Form-item label="合同名称" prop="">
                  <Input v-model="searchForm.contract_name" style="width: 260px;"/>
                </Form-item>
                <Form-item style="margin-left:-100px;" class="br">
                  <Button @click="handleSearch" type="primary" icon="ios-search">搜索</Button>
                  <Button @click="handleReset">重置</Button>
                </Form-item>
              </Form>
            </Row>
            <Row class="operation">
              <Button @click="editInvoiceApply" type="warning" icon="ios-bookmarks-outline" >审核发票申请</Button>
              <Button @click="viewInvoiceApply" type="success" icon="ios-bookmarks-outline" >查看发票信息</Button>
              <Button @click="viewAttachment" type="error" icon="ios-bookmarks-outline" >附件管理</Button>
              <Button @click="refresh" icon="refresh">刷新</Button>
            </Row>
            <Row>
              <Alert show-icon>
                已选择 <span class="select-count">{{selectCount}}</span> 项
                <a class="select-clear" @click="clearSelectAll">清空</a>
              </Alert>
            </Row>
            <Row>
              <Table
                border
                :loading="loading"
                :columns="columns"
                :data="data"
                sortable="custom"
                @on-selection-change="showSelect"
                ref="table">
              </Table>
              <Table :columns="exportColumns" :data="exportData" ref="exportTable" style="display:none"></Table>
            </Row>
            <Row type="flex" justify="end" class="page">
              <Page
                :current="searchForm.pageNumber"
                :total="total"
                :page-size="searchForm.pageSize"
                @on-change="changePage"
                @on-page-size-change="changePageSize"
                :page-size-opts="[10,20,50]"
                size="small"
                show-total
                show-elevator
                show-sizer
              ></Page>
            </Row>
          </Card>
        </Col>
      </Row>
    </div>
  </div>
</template>
<script>
import { getInvoiceAllApply } from '@/api/contract';
export default {
  name: 'invoice-aply-manager',
  data() {
    return {
      loading: false,
      searchForm: {
        contract_name: '',
        pageNumber: 1,
        pageSize: 10
      },
      data: [],
      total: 0,
      selectCount: 0,
      exportData: [],
      selectList: [],
      exportColumns: [],
      columns: [
        {
          type: "selection",
          width: 40,
          align: "center",
          fixed: "left"
        },
        {
          type: "index",
          width: 40,
          align: "center",
          fixed: "left"
        },
        {
          title: '项目部',
          key: 'organization_name',
          width: 90
        },
        {
          title: '合同编码',
          key: 'contract_code',
          width: 190
        },
        {
          title: '合同名称',
          key: 'contract_name',
          width: 160,
        },
        {
          title: '甲方',
          key: 'company',
          width: 160
        },
        {
          title: '企业机构代码',
          key: 'credit_code',
          width: 160
        },
        {
          title: '签订日期',
          key: 'contract_date',
          align: 'center',
          width: 90
        },
        {
          title: '合同总价款',
          key: 'cost',
          align: "right",
          width: 100,
        },
        {
          title: '本次申请金额',
          key: 'apply_cost',
          align: "right",
          width: 100,
        },
        {
          title: '开户银行',
          key: 'bank_name',
          width: 120
        },
        {
          title: '银行帐号',
          key: 'bank_account',
          width: 160
        },
        {
          title: '状态',
          key: 'state',
          align: "center",
          width: 70,
          render: (h, params) => {
            if (params.row.state == 1) {
              return h("div", [
                h("Badge", {
                  props: {
                    status: "success",
                    text: "已开票"
                  }
                })
              ]);
            } else {
              return h("div", [
                h("Badge", {
                  props: {
                    status: "error",
                    text: "申请中"
                  }
                })
              ]);
            }
          }
        },
      ],
    }
  },
  methods: {
    getInvoiceApplyList() {
      this.loading = true;
      getInvoiceAllApply(this.searchForm).then(res => {
        this.loading = false;
        if (res.code === 0) {
          console.log(res)
          this.data = res.data.rows;
          this.total = res.data.count;
        }
      })
    },
    init() {
      this.getInvoiceApplyList();
    },
    handleSearch() {

    },
    handleReset() {

    },
    editInvoiceApply() {

    },
    viewInvoiceApply() {

    },   
    viewAttachment() {

    },
    refresh() {

    },
    clearSelectAll() {

    },
    showSelect() {

    },
    changePage(v) {

    },
    changePageSize(v) {

    }
  },
  mounted() {
    this.init();
  }
}
</script>
<style lang="less" scoped>
@import "./invoiceManager.less";
</style>